<template>
	<div class="myintergralwrap">
		<div class="myintergralwrap-title">我的收藏</div>
		<div class="mycollect-text" v-if="datas!=''">
			<div class="mycollect-food clear" v-for="data in datas" :key="data.id">
				<div class="mycollect-food-img"><img :src="data.foodimg" alt=""></div>
				<div class="mycollect-food-name">{{data.foodname}}</div>
				<div class="mycollect-food-text">{{data.foodtext}}</div>
				<div class="mycollect-food-money"><span>￥{{data.foodnewmoney}}</span><span v-if="data.foodoldmoney!=''">￥{{data.foodoldmoney}}</span><i class="iconfont icon-gouwuche"></i></div>
				<div class="mycollect-food-sytle" v-if="data.foodstate==2">已失效</div>
				<div class="mycollect-food-sytle" v-if="data.foodstate==1" :collect="data.id" @click="quxiaocollect">取消收藏</div>
			</div>
		</div>
		<div class="nullcollect" v-if="datas==''">我的收藏为空</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				datas:null,
			}
		},
		// created(){
		// 	var userphone=localStorage.getItem("userphone");
		// 	var _this=this;
		// 	this.$axios.post("http://localhost:3000/userinfor/usercollect",{userphone:userphone})
		// 	.then(function(response){
		// 		var list=response.data;
		// 		if(list.code==200){
		// 			_this.datas=list.data;
		// 			localStorage.setItem("userid",list.userid)
		// 		}
		// 	}).catch(function (error) {
		// 			window.console.log(error);
		// 		})
		// },
		// methods:{
		// 	quxiaocollect(e){
		// 		var userphone=localStorage.getItem("userphone");
		// 		// var _this=this;
		// 		var id=e.target.getAttribute('collect');
		// 		window.console.log(id)
		// 		this.$axios.post("http://localhost:3000/userinfor/quxiaousercollect",{userphone:userphone,id:id})
		// 		.then(function(response){
		// 			var list=response.data;
		// 			if(list.code==200){
		// 				alert("取消收藏成功");
		// 				location.reload();
		// 			}
		// 		}).catch(function (error) {
		// 				window.console.log(error);
		// 			})
		// 	}
		// }
	}
</script>

<style>
	.mycollect-text{
		width: 94%;
		margin-left: 3%;
		
	}
	.mycollect-food{
		display: inline-block;
		width:30% ;
		height: 478px;
		border: 1px solid #c1c1c1;
		margin-right: 3%;
		margin-top: 40px;
		margin-bottom: 40px;
		position: relative;
	}
	.mycollect-food-img{
		width: 100%;
		height: 312px;
		background-size: 100% 100%;
	}
	.mycollect-food-name{
		font-size: 20px;
	
		margin-left: 10%;
	}
	.mycollect-food-text{
		font-size: 16px;
		color: #bababa;
		height: 28px;
		line-height: 28px;
		margin-left: 10%;
	}
	.mycollect-food-money{
		margin-left: 10%;
	}
	.mycollect-food-money span:nth-of-type(1){
		font-size: 22px;
		font-weight: bold;
		color: red;
	}
	.mycollect-food-money span:nth-of-type(2){
		font-size: 20px;
		color: #bababa;
		text-decoration: line-through;
		margin-left: 5%;
	}
	.mycollect-food-money i{
		float: right;
		font-size: 26px;
		color: orangered;
	}
	.mycollect-food-sytle{
		width:150px ;
		height: 30px;
		line-height: 30px;
		text-align: center;
		background: #00B066;
		border-radius: 20px;
		color: white;
		margin: auto;
		margin-top: 20px;
	}
	.nullcollect{
		width: 100%;
		height: 560px;
	}
</style>
